<template>
  <h3>{{ eidtId ? "编辑" : "新建" }}英雄</h3>
  <div class="createClass">
    <el-form
      :inline="true"
      :model="category.categoryMsg"
      class="demo-form-inline"
      @submit="() => false"
    >
      <el-tabs model-value="skills">
        <el-tab-pane class="baseMsg" label="基本信息" name="baseMsg">
          <el-form-item label="英雄名称">
            <el-input
              v-model="category.categoryMsg.name"
              placeholder="请输入分类名"
              width="100px"
            />
          </el-form-item>

          <el-form-item label="英雄称号">
            <el-input
              v-model="category.categoryMsg.title"
              placeholder="请输入英雄称号"
              width="100px"
            />
          </el-form-item>
          <!--      英雄头像-->
          <el-form-item label="英雄头像">
            <el-upload
              class="avatar-uploader"
              action="/api/upload"
              :show-file-list="false"
              :on-success="successed"
              :before-upload="beforeUpload"
            >
              <img
                v-if="category.categoryMsg.img"
                :src="category.categoryMsg.img"
                class="avatar"
              />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item>
          <!--        英雄类型-->
          <el-form-item label="英雄类型">
            <el-select
              v-model="category.categoryMsg.categories"
              placeholder="Select"
              multiple="multiple"
            >
              <el-option
                v-for="type in category.categorList"
                :key="type._id"
                :value="type._id"
                :label="type.name"
              ></el-option>
            </el-select>
          </el-form-item>
          <!--      英雄评分-->
          <el-form-item label="难度评分">
            <el-rate
              v-model="category.categoryMsg.scores.difficult"
              :max="10"
              show-score
            />
          </el-form-item>
          <el-form-item label="技能评分">
            <el-rate
              v-model="category.categoryMsg.scores.skills"
              :max="10"
              show-score
            />
          </el-form-item>
          <el-form-item label="攻击评分">
            <el-rate
              v-model="category.categoryMsg.scores.attack"
              :max="10"
              show-score
            />
          </el-form-item>
          <el-form-item label="生存评分">
            <el-rate
              v-model="category.categoryMsg.scores.survive"
              :max="10"
              show-score
            />
          </el-form-item>
          <!--        英雄出装选择-->
          <el-form-item label="顺风出装">
            <el-select
              v-model="category.categoryMsg.items1"
              placeholder="请选择顺丰出装"
              multiple="multiple"
            >
              <el-option
                v-for="type in category.items"
                :key="type._id"
                :value="type._id"
                :label="type.name"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="逆风出装">
            <el-select
              v-model="category.categoryMsg.items2"
              placeholder="请选择逆风出装"
              multiple="multiple"
            >
              <el-option
                v-for="type in category.items"
                :key="type._id"
                :value="type._id"
                :label="type.name"
              ></el-option>
            </el-select>
          </el-form-item>
          <!--      使用技巧-->
          <el-form-item label="使用建议">
            <el-input
              type="textarea"
              v-model="category.categoryMsg.usageTips"
            />
          </el-form-item>
          <!--      对抗技巧技巧-->
          <el-form-item label="对抗建议">
            <el-input
              type="textarea"
              v-model="category.categoryMsg.battleTips"
            />
          </el-form-item>
          <el-form-item label="团队建议">
            <el-input type="textarea" v-model="category.categoryMsg.teamTips" />
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane class="skills-msg" label="添加技能" name="skills">
          <el-button
            type="primary"
            size="small"
            style="margin-bottom: 20px"
            @click="addSkill"
            >添加技能
          </el-button>
          <el-row class="skills-row">
            <el-col class="skills-col" :span="10">
              <el-form-item label="技能名称">
                <el-input width="120px" v-model="category.skill.name" />
              </el-form-item>
              <!--            技能图标-->
              <el-form-item label="技能图标">
                <el-upload
                  class="avatar-uploader"
                  action="/api/upload"
                  :heders="useGetToken()"
                  :show-file-list="false"
                  :on-success="successedSkillIcon"
                  :before-upload="beforeUploadSkillIcon"
                >
                  <img
                    v-if="category.skill.icon"
                    :src="category.skill.icon"
                    class="avatar"
                  />
                  <el-icon v-else class="avatar-uploader-icon"
                    ><Plus
                  /></el-icon>
                </el-upload>
              </el-form-item>
              <!--            技能排序-->
              <el-form-item label="技能排序">
                <el-input-number
                  v-model="category.skill.skillRank"
                  :min="1"
                  :max="4"
                  @change="changeSkill"
                />
              </el-form-item>
              <!--            技能描述-->
              <el-form-item label="技能描述">
                <el-input
                  type="textarea"
                  v-model="category.skill.description"
                />
              </el-form-item>
              <!--            技能小提示-->
              <el-form-item label="技能提示">
                <el-input type="textarea" v-model="category.skill.tips" />
              </el-form-item>
            </el-col>
            <!--          技能栏-->
            <el-form-item label="技能列表">
              <div class="skills-list">
                <div
                  class="skill"
                  v-for="(skill, index) in category.categoryMsg.skills"
                  :key="index"
                >
                  <img :src="skill.icon" />
                  <p>{{ skill.name }}</p>
                  <div class="skill-edit">
                    <el-button size="small" text @click="deleteSkill(index)"
                      >删除</el-button
                    >
                    <el-button size="small" text @click="editSkill(index)"
                      >编辑</el-button
                    >
                  </div>
                </div>
              </div>
            </el-form-item>
          </el-row>
        </el-tab-pane>
      </el-tabs>
      <el-button type="primary" @click="onSubmit" style="margin-top: 40px"
        >{{ eidtId ? "更新" : "创建" }}英雄</el-button
      >
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { computed, onBeforeMount, reactive } from "vue";
import { creatHeros, getEditHeros, upDateHeros } from "@/api/getHeros";
import { getCreatCategory } from "@/api/getCategory";
import { getItem } from "@/api/getItem";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";

import { Plus } from "@element-plus/icons-vue";
import { Scores } from "./herosEditType";
import {useGetToken} from "@/hook/useGetToken";
// import type { UploadProps } from 'element-plus'
//分类信息

const category = reactive({
  //上传的数据
  categoryMsg: {
    name: "",
    img: "",
    title: "",
    //英雄类型
    categories: [],
    scores: <Scores>{},
    //顺风出装
    items1: [],
    //逆风出装
    items2: [],
    //使用技巧
    usageTips: "",
    //对抗技巧
    battleTips: "",
    //团队技巧
    teamTips: "",
    //技能
    skills: <any>[],
  },
  categorList: <any>[],
  items: <any>[],
  skill: {
    name: "",
    tips: "",
    icon: "",
    delay: "",
    cost: "",
    description: "",
    skillRank: 1,
  },
});

const router = useRouter();
const route = useRoute();

const eidtId = computed(() => {
  return route.params.id;
});
//提交分类信息
const onSubmit = async () => {
  let result;
  if (route.params.id) {
    //更新英雄数据
    result = await upDateHeros(eidtId.value, category.categoryMsg);
  } else {
    //添加英雄
    result = await creatHeros(category.categoryMsg);
  }

  if (result.status === 200) {
    router.push({
      path: "/home/herosList",
    });
    //消息提示框
    ElMessage({
      message: "保存成功",
      type: "success",
    });
  } else {
    ElMessage({
      message: "保存失败",
      type: "warning",
    });
  }
};

//获取被编辑数据的详情
const getEdit = async () => {
  let result = await getEditHeros(eidtId.value);

  if (result.status === 200) {
    category.categoryMsg = Object.assign({}, category.categoryMsg, result.data);
  }
};

//图片上传成功回调
const successed = (res: any) => {
  //添加到需要提交的对象属性中
  category.categoryMsg.img = res.url;
};
//图片上传之前回调钩子
const beforeUpload = () => {};
//请求到category里的数据 获取英雄类型
const getCategories = async () => {
  const result = await getCreatCategory();
  if (result.status === 200) {
    category.categorList = result.data;
  }
};

//请求装备数据
const getItems = async () => {
  const result = await getItem();
  if (result.status === 200) {
    category.items = result.data;
  }
};
//上传技能图标
const successedSkillIcon = (res: any) => {
  category.skill.icon = res.url;
};
//上传技能图标成功后
const beforeUploadSkillIcon = (res: any) => {};

//增加技能
const addSkill = () => {
  category.categoryMsg.skills.push(Object.assign({}, category.skill));
  sortSkill();
};

//删除技能
const deleteSkill = (index: number) => {
  delete category.categoryMsg.skills[index];
  sortSkill();
};
//编辑技能
const editSkill = (index: number) => {
  category.skill = category.categoryMsg.skills[index];
  sortSkill();
};
//改变技能排序
const changeSkill = () => {};

//技能排序函数
const sortSkill = () => {
  category.categoryMsg.skills.sort((a: any, b: any) => {
    return a.skillRank - b.skillRank;
  });
};

onBeforeMount(async () => {
  if (route.params.id) await getEdit();
  await getCategories();
  await getItems();
  //吧技能排序
  sortSkill();
});
</script>

<style lang="less" scoped>
.createClass {
  margin: 40px 40px 0 40px;
}
.avatar-uploader .el-upload {
  border: 1px solid black;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: black;
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
  border: 1px solid black;
  border-radius: 10px;
}
//基本信息
.baseMsg {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}
//添加技能信息
.skills-msg {
  .skills-row {
    display: flex;
  }
  .skills-col {
    display: flex;
    flex-direction: column;
  }
}
//技能栏样式
.skills-list {
  height: 150px;
  width: 800px;
  border: 2px solid #cfd2cf;
  border-radius: 10px;

  display: flex;
  justify-content: flex-start;

  .skill {
    width: 200px;
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    .skill-edit {
      display: flex;
    }
    img {
      height: 50px;
      width: 50px;
      border-radius: 50%;
    }
  }
}
</style>
